<template>
    <el-form ref="ruleFormRef" label-position="top" :model="form" :rules="formRules" label-width="auto"
        v-loading="isLoading">
        <el-row :gutter="30">
            <re-col :value='24' :xs='24' :sm='24'>
                <el-form-item prop='' label="已选择设备">
                    <multipleSelectList
                     v-model:model-value="form.ids"
                     :data-list="transferList" label="deviceSN"
                        value="id" />
                </el-form-item>
            </re-col>
                <re-col :value='12' :xs='12' :sm='12'>
                <el-form-item label='续费时长' prop='serveTime'>
                    <el-input v-model.trim="form.serveTime" placeholder='请输入续费时长'
                        :formatter="(value) => value.replace(/[^\d]/g, '')"
                        :parser="(value) => value.replace(/[^\d]/g, '')">
                        <template #append>月</template>
                    </el-input>

                </el-form-item>
            </re-col>
        </el-row>
    </el-form>
</template>
<script lang="ts" setup>
import ReCol from "@/components/ReCol";
import type { FormRules } from "element-plus";
import type { infoType } from '@/api/manage/Individual-management/device-management/index';
import multipleSelectList from '@/components/multipleSelectList/multipleSelectList.vue'
import { getseverList } from '@/api/manage/Individual-management/device-management/index'
type FormProps = {
    form:any,
    // formInline: infoType,
    isLoading: boolean,
    transferList: any[]
}
const props = withDefaults(defineProps<FormProps>(), {
    form: {
        ids: null,
    },
    isLoading: false,
    transferList: () => []
});

const ruleFormRef = ref();
// const transferList = ref([] as any[])
const formRules = reactive(<FormRules>{
    ids: [{ required: true, message: '请选择设备', trigger: 'blur' },],

});
console.log("ssaxzcz",props);

onMounted(() => {
    // getseverList().then(res => {
        //  transferList.value.push(...props.form.ids)
    // })
})


function getRef() {
    return ruleFormRef.value;
}

defineExpose({ getRef });
</script>
<style lang="scss" scoped></style>